<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空余空间,溢出省略号</title>
    <style>
        div{
         background: yellow;
         width: 200px;
         height: 200px;
         /* white-space: pre-line; */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }
        /*
        nowrap:不换行；
        pre：显示空格，回车，不换行
        pre-warp：显示空格，回车，换行
        pre-line:显示回车，不显示空格，换行
        */
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error voluptatem eos at nulla animi quod officia quisquam adipisci aspernatur repellendus sequi, ea facilis, obcaecati facere cumque saepe expedita, corrupti blanditiis?
    </div>
    <!-- <div>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa eligendi nostrum officiis voluptatem recusandae sit at ducimus, natus repudiandae hic dolore reiciendis dolorum consectetur cupiditate! Fuga laborum voluptatum qui labore.
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium culpa repudiandae illo ipsum molestiae perspiciatis, accusamus ab laboriosam aspernatur repellat officia distinctio nostrum dolorem blanditiis adipisci laudantium unde, voluptatum dolore!
          
    </div>
    <pre>
        预格式化文本-保留空格，tab，回车
    </pre> -->
</body>
</html>